<template>
  <div>
    <div>
      <!-- table -->
      <el-card shadow="nerver" class="base-table">
        <el-table
            v-loading="tableLoading"
            :data="tableData"
            stripe
            border
            style="width: 100%">
          <el-table-column prop="id" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="dispose_name" label="处理名称" width="200" align="center"></el-table-column>
          <el-table-column prop="dispose_status" label="处理状态" width="200" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.dispose_status === 0">接受</span>
              <span v-if="scope.row.dispose_status === 1">已处理</span>
              <span v-if="scope.row.dispose_status === 2">处理失败</span>
              <span v-if="scope.row.dispose_status === 3">忽略</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
          <el-table-column label="回调内容" width="300" align="center">
            <template slot-scope="{ row }">
              <el-popover
                  placement="top"
                  trigger="hover">
                <pre class="handleLog-pre" v-html="getJson(row.json)"></pre>
                <div class="record-text" slot="reference">{{row.json}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="处理结果" width="300" align="center">
            <template slot-scope="{ row }">
              <el-popover
                  placement="top"
                  trigger="hover">
                <pre class="handleLog-pre" v-html="getJson(row.dispose_outcome)"></pre>
                <div class="record-text" slot="reference">{{row.dispose_outcome}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="dispose_url" label="处理接口" width="200" align="center"></el-table-column>
          <el-table-column label="请求参数" width="300" align="center">
            <template slot-scope="{ row }">
              <el-popover
                  placement="top"
                  trigger="hover">
                <pre class="handleLog-pre" v-html="getJson(row.dispose_param)"></pre>
                <div class="record-text" slot="reference">{{row.dispose_param}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" >
            <template slot-scope="scope" v-if="scope.row.dispose_status === 2">
              <PersButton type="text" size="mini" label="手动操作" icon="fa  fa-pencil" perms="scrm:callback:sun" @click="requestAgain(scope.row)"></PersButton>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.current"
            :page-size="pagination.size"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
import {getCallbackDataList,requestAgain} from '@/api/scrm/callback/callback'
import PersButton from "@/components/PersButton.vue";
import axios from 'axios';
export default {
  components: {PersButton},
  data() {
    return {
      pagination: { // 分页器信息
        total: 1,
        current: 1,
        size: this.$store.state.defaultPageSize
      },
      tableData: [],
      tableLoading: false,
    }
  },
  created() {
    this.queryTable()
  },
  methods: {
    getJson(val) {
      let json = ''
      if (val) {
        try {
          let obj = {}
          obj = typeof (val) === 'object' ? val : JSON.parse(val)
          json = JSON.stringify(obj, null, 4)
          return this.syntaxHighlight(json)
        } catch (err) {
          json = val
          return json
        }
      }
    },
    // 高亮处理json
    syntaxHighlight(json) {
      if (typeof json !== 'string') {
        json = JSON.stringify(json, undefined, 2)
      }
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
        var cls = 'jsonnumber'
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'jsonkey'
          } else {
            cls = 'jsonstring'
          }
        } else if (/true|false/.test(match)) {
          cls = 'jsonboolean'
        } else if (/null/.test(match)) {
          cls = 'jsonnull'
        }
        return '<span class="' + cls + '">' + match + '</span>'
      })
    },
    // 页码改变触发
    handleCurrentChange() {
      this.queryTable()
    },
    queryTable() {
      this.tableLoading = true;
      let param = {
        "size": this.pagination.pageSize,
        "page": this.pagination.current,
      }
      getCallbackDataList(param).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
          this.tableLoading = false;
        }
      })
    },
    requestAgain(param) {
      console.log(param)
      requestAgain(param).then((res) => {
          if (res.code == 200) {
              this.queryTable()
          }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.record-text{
  width: 280px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.handleLog-pre {
  padding: 5px 10px;
  margin: 5px;
  word-break:break-all;
  max-height: 500px;
  overflow: auto;
  max-width:800px;
}
</style>